<!DOCTYPE HTML>
<html>
<head>
<!--jQuery dependencies-->
    <link rel="stylesheet" href="../../pqgrid/css/jquery-ui-base-1.9.1.css" />
    <script src="../../pqgrid/js/jquery-1.9.1.min.js"></script>    
    <script src="../../pqgrid/js/jquery-ui-1.9.2.min.js"></script>
<!--PQ Grid files-->
    <link rel="stylesheet" href="../../pqgrid/pqgrid.min.css" />
    <script src="../../pqgrid/pqgrid.min.js"></script>
<!--PQ Grid Office theme-->
    <link rel="stylesheet" href="../../pqgrid/themes/office/pqgrid.css" />

    <style type="text/css">
	div.pq-grid *
	{
	    font-size:12px;    
	}
	button.delete_btn
	{
	    margin:-2px 0px;
	}
	button.edit_btn
	{
	    margin:-3px 0px;
	}
	tr.pq-grid-row td
	{
	    color:#888;
	}
	tr.pq-row-edit > td
	{
	    color:#000;
	}
	tr.pq-row-delete
	{
	    text-decoration:line-through;         
	}
	tr.pq-row-delete td
	{
	    background-color:pink;   
	}
	</style>

<script>
    $(function () {
        //define common ajax object for addition, update and delete.
        var ajaxObj = {
            dataType: "JSON",
            beforeSend: function () {
                this.pqGrid("showLoading");
            },
            complete: function () {
                this.pqGrid("hideLoading");
            },
            error: function () {
                this.pqGrid("rollback");
            }
        };

        //to check whether any row is currently being edited.
        function isEditing($grid) {
            var rows = $grid.pqGrid("getRowsByClass", { cls: 'pq-row-edit' });
            if (rows.length > 0) {
                var rowIndx = rows[0].rowIndx;
                $grid.pqGrid("goToPage", { rowIndx: rowIndx });
                //focus on editor if any 
                $grid.pqGrid("editFirstCellInRow", { rowIndx: rowIndx });
                return true;
            }
            return false;
        }
        //called by add button in toolbar.
        function addRow($grid) {
            if (isEditing($grid)) {
                return false;
            }
            //append empty row in the first row.                            
            var rowData = { UnitPrice: 0, UnitsInStock: 0, UnitsOnOrder: 0, Discontinued: false, ProductName: "" }; //empty row template
            $grid.pqGrid("addRow", { rowIndxPage: 0, rowData: rowData });

            var $tr = $grid.pqGrid("getRow", { rowIndxPage: 0 });
            if ($tr) {
                //simulate click on edit button.
                $tr.find("button.edit_btn").click();
            }
        }
        //called by delete button.
        function deleteRow(rowIndx, $grid) {
            $grid.pqGrid("addClass", { rowIndx: rowIndx, cls: 'pq-row-delete' });
            var rowData = $grid.pqGrid("getRowData", { rowIndx: rowIndx });
            var ans = window.confirm("Are you sure to delete row No " + (rowIndx + 1) + "?");

            if (ans) {
                var ProductID = $grid.pqGrid("getRecId", { rowIndx: rowIndx });
                $grid.pqGrid("deleteRow", { rowIndx: rowIndx });

                $.ajax($.extend({}, ajaxObj, {
                    context: $grid,
                    url: "/pro/products/delete", //for ASP.NET, java
                    //url: "/pro/products.php?pq_delete=1",//for PHP
                    data: { ProductID: ProductID },
                    success: function () {
                        this.pqGrid("commit");
                        this.pqGrid("refreshDataAndView");
                    },
                    error: function () {
                        //debugger;
                        this.pqGrid("removeClass", { rowData: rowData, cls: 'pq-row-delete' });
                        this.pqGrid("rollback");
                    }
                }));
            }
            else {
                $grid.pqGrid("removeClass", { rowIndx: rowIndx, cls: 'pq-row-delete' });
            }
        }
        //called by edit button.
        function editRow(rowIndx, $grid) {
            //debugger;
            $grid.pqGrid("addClass", { rowIndx: rowIndx, cls: 'pq-row-edit' });
            $grid.pqGrid("editFirstCellInRow", { rowIndx: rowIndx });

            //change edit button to update button and delete to cancel.
            var $tr = $grid.pqGrid("getRow", { rowIndx: rowIndx }),
                $btn = $tr.find("button.edit_btn");
            $btn.button("option", { label: "Update", "icons": { primary: "ui-icon-check"} })
                .unbind("click")
                .click(function (evt) {
                    evt.preventDefault();
                    return update(rowIndx, $grid);
                });
            $btn.next().button("option", { label: "Cancel", "icons": { primary: "ui-icon-cancel"} })
                .unbind("click")
                .click(function (evt) {
                    $grid.pqGrid("quitEditMode")
                        .pqGrid("removeClass", { rowIndx: rowIndx, cls: 'pq-row-edit' })
                        .pqGrid("rollback");
                });
        }
        //called by update button.
        function update(rowIndx, $grid) {
            var grid = $grid.pqGrid('getInstance').grid;
            if (grid.saveEditCell() == false) {
                return false;
            }

            var isValid = grid.isValid({ rowIndx: rowIndx }).valid;
            if (!isValid) {
                return false;
            }

            if (grid.isDirty()) {
                var url,
                    rowData = grid.getRowData({ rowIndx: rowIndx }),
                    recIndx = grid.option("dataModel.recIndx"),
                    type;

                grid.removeClass({ rowIndx: rowIndx, cls: 'pq-row-edit' });

                if (rowData[recIndx] == null) {
                    //add record.
                    type = 'add';
                    url = "/pro/products/add"; //ASP.NET, java
                    //url = "/pro/products.php?pq_add=1"; //for PHP
                }
                else {
                    //update record.
                    type = 'update';
                    url = "/pro/products/update"; //ASP.NET, java
                    //url = "/pro/products.php?pq_update=1"; //for PHP
                }
                $.ajax($.extend({}, ajaxObj, {
                    context: $grid,
                    url: url,
                    data: rowData,
                    success: function (response) {
                        if (type == 'add') {
                            rowData[recIndx] = response.recId;
                        }
                        //debugger;
                        grid.commit({ type: type, rows: [rowData] });
                        grid.refreshRow({ rowIndx: rowIndx });
                    }
                }));
            }
            else {
                grid.quitEditMode();
                grid.removeClass({ rowIndx: rowIndx, cls: 'pq-row-edit' });
                grid.refreshRow({ rowIndx: rowIndx });
            }
        }
        //define the grid.
        var obj = {
            wrap: false,
            hwrap: false,
            resizable: true,
            columnBorders: false,
            numberCell: { show: false },
            track: true, //to turn on the track changes.
            flexHeight: true,
            toolbar: {
                items: [
                    { type: 'button', icon: 'ui-icon-plus', label: 'Add Product', listener:
                        { "click": function (evt, ui) {
                            var $grid = $(this).closest('.pq-grid');
                            addRow($grid);
                        }
                        }
                    }
                ]
            },
            scrollModel: {
                autoFit: true
            },
            selectionModel: {
                type: 'cell'
            },
            //hoverMode: 'cell',
            editModel: {
                saveKey: $.ui.keyCode.ENTER,
                onSave: 'next'
            },
            editor: { type: 'textbox', select: true, style: 'outline:none;' },
            validation: {
                icon: 'ui-icon-info'
            },
            title: "<b>Inline Editing</b>",

            colModel: [
                    { title: "Product ID", dataType: "integer", dataIndx: "ProductID", editable: false, width: 80 },
                    { title: "Product Name", width: 165, dataType: "string", dataIndx: "ProductName",
                        validations: [
                            { type: 'minLen', value: 1, msg: "Required" },
                            { type: 'maxLen', value: 40, msg: "length should be <= 40" }
                        ]
                    },
                    { title: "Quantity Per Unit", width: 140, dataType: "string", align: "right", dataIndx: "QuantityPerUnit",
                        validations: [
                            { type: 'minLen', value: 1, msg: "Required." },
                            { type: 'maxLen', value: 20, msg: "length should be <= 20" }
                        ]
                    },
                    { title: "Unit Price", width: 100, dataType: "float", align: "right", dataIndx: "UnitPrice",
                        validations: [{ type: 'gt', value: 0.5, msg: "should be > 0.5"}],
                        render: function (ui) {
                            return (ui.cellData != null) ? "$" + parseFloat(ui.cellData).toFixed(2) : "";
                        }
                    },
                    { title: "Units In Stock", width: 100, dataType: "integer", align: "right", dataIndx: "UnitsInStock",
                        validations: [{ type: 'gte', value: 1, msg: "should be >= 1"}]
                    },
                    { title: "Units On Order", dataType: "integer", hidden: true, dataIndx: "UnitsOnOrder",
                        validations: [{ type: 'gte', value: 0, msg: "should be >= 0"}]
                    },
                    { title: "Discontinued", width: 100, dataType: "bool", align: "center", dataIndx: "Discontinued",
                        editor: { type: "checkbox", subtype: 'triple', style: "margin:3px 5px;" },
                        validations: [{ type: 'nonEmpty', msg: 'True or False'}]
                    },
                    { title: "", editable: false, minWidth: 165, sortable: false, render: function (ui) {
                        return "<button type='button' class='edit_btn'>Edit</button>\
                            <button type='button' class='delete_btn'>Delete</button>";
                    }
                    }
            ],
            dataModel: {
                dataType: "JSON",
                location: "remote",
                recIndx: "ProductID",
                url: "/pro/products/getP",
                //url: "/pro/products.php",//for PHP
                getData: function (response) {
                    return { data: response.data, curPage: response.curPage, totalRecords: response.totalRecords };
                }
            },
            pageModel: { type: "remote" },
            //make rows editable selectively.
            editable: function (ui) {
                var $grid = $(this);
                var rowIndx = ui.rowIndx;
                if ($grid.pqGrid("hasClass", { rowIndx: rowIndx, cls: 'pq-row-edit' }) == true) {
                    return true;
                }
                else {
                    return false;
                }
            },
            create: function (evt, ui) {
                $(this).pqTooltip();
            }
        };
        var $grid = $("#grid_editing").pqGrid(obj);
        
        //check the changes in grid before navigating to another page or refresh data.
        $grid.find(".pq-pager").on("pqpagerbeforechange pqpagerbeforerefresh", function (evt, ui) {
            if ($grid.pqGrid('isDirty')) {
                var ans = window.confirm("There are unsaved changes. Are you sure?");
                if(!ans){
                    return false;
                }
            }
        });
        //use refresh & refreshRow events to display jQueryUI buttons and bind events.
        $grid.on('pqgridrefresh pqgridrefreshrow', function () {
            var $grid = $(this);

            //delete button
            $grid.find("button.delete_btn").button({ icons: { primary: 'ui-icon-close'} })
            .unbind("click")
            .bind("click", function (evt) {
                if (isEditing($grid)) {
                    return false;
                }
                var $tr = $(this).closest("tr"),
                    rowIndx = $grid.pqGrid("getRowIndx", { $tr: $tr }).rowIndx;
                deleteRow(rowIndx, $grid);
            });
            //edit button
            $grid.find("button.edit_btn").button({ icons: { primary: 'ui-icon-pencil'} })
            .unbind("click")
            .bind("click", function (evt) {
                if (isEditing($grid)) {
                    return false;
                }
                var $tr = $(this).closest("tr"),
                    rowIndx = $grid.pqGrid("getRowIndx", { $tr: $tr }).rowIndx;
                editRow(rowIndx, $grid);
                return false;
            });

            //rows which were in edit mode before refresh, put them in edit mode again.
            var rows = $grid.pqGrid("getRowsByClass", { cls: 'pq-row-edit' });
            if (rows.length > 0) {
                var rowIndx = rows[0].rowIndx;
                editRow(rowIndx, $grid);
            }
        });
    });
        
</script>    
</head>
<body>

<div id="grid_editing" style="margin: auto;">
</div>

</body>

</html>
